import  { useEffect } from 'react';
import 'xterm/css/xterm.css';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';

function MidTerminal(): JSX.Element {
  // 添加https和http的支持
  // wss://${window.location.hostname}:${window.location.port}

  useEffect(() => {
    const terminal = new Terminal({
      cursorStyle: 'underline',
      cursorBlink: true,
      theme: {
        foreground: '#dddddd',
        cursor: 'gray'
      },
      windowsMode: true
    });

    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);
    const terminalDom = document.getElementById('terminal-container');
    terminal.open(terminalDom as HTMLElement);
    fitAddon.fit();

    terminal.onData((e: string) => {
      console.log(e)
    });
    return () => {
      terminal.dispose();
    };
  }, []);

  return (
    <div
      id="terminal-container"
      style={{ width: '100%', height: '100%' }}
    ></div>
  );
}

export { MidTerminal as NestTerminal};